<template>
        <div style="margin: 30px;">
           <!-- <div>调拨编号：</div> -->
           <div style="margin: 30px 0">
                <el-form :inline="true">
                    <el-form-item label="转出仓库">
                        <el-select v-model="outstore" size="medium">
                            <el-option :value="item.id" :label="item.cellName" v-for="item in selectedOptions" :key="item.index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="转入仓库">
                        <el-select v-model="storeId" size="medium" @change="handleChange">
                            <el-option :value="item.id" :label="item.cellName" v-for="item in selectedOptions" :key="item.index"></el-option>
                        </el-select>
                        <el-select v-model="inputAreaId" size="medium" @change="handleChangetype">
                            <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                            <span v-if="inType == 1">转让货位余量 : {{unusedNum}}{{unit}}</span>
                            <span v-if="inType == 0">新酒货位余量:{{unusedNum}}{{unit}}</span>
                    </el-form-item>
                    <el-form-item label="" style="margin-left:50px">
                        <el-button type="primary" size="medium" @click="sureAllcat">确定调拨</el-button>
                        <el-button type="warning" size="medium" @click="Allcatrecord">调拨记录</el-button>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="goodsId" autofocus @keyup.enter.native="smentry"  style="width:250px" placeholder="请录入商品ID"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" size="medium" @click="smentry()">确定录入</el-button>
                        </el-form-item>
                </el-form>
    
        </div>
        <div class="wrapper">
                <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
                 <el-table-column
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column align="center" type="selection">
                    </el-table-column>
                  <el-table-column align="center" prop="goodsId" label="商品ID">
                  </el-table-column>
                  <el-table-column align="center" prop="goods_name" label="商品名称">
                  </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" prop="odorType" label="香型">
                  </el-table-column>
                  <el-table-column align="center" prop="netContent" label="净含量">
                  </el-table-column>
                  <el-table-column align="center" prop="alocohl" label="酒精度">
                  </el-table-column>
                  <el-table-column align="center" prop="unit" label="单位" width="50">
                  </el-table-column>
                  <el-table-column align="center" prop="ageName" label="现存位置">
                  </el-table-column>
                  <el-table-column align="center" prop="nowName" label="调拨后位置">
                  </el-table-column>
                  <el-table-column align="center" prop="address" label="明细备注" width="300">
                        <template slot-scope="scope">
                                <el-button
                                size="mini"
                                type="primary" plain
                                @click="istest(scope.row)" v-if="scope.row.description == ''">添加备注</el-button>
                               
                                <span class="canceloff-btn" @click="istest(scope.row)" style="color:blue" v-else>{{scope.row.description}}</span>
                            </template>
    
                  </el-table-column>
                  <!-- <el-table-column align="center" prop="description" label="明细备注" width="300">
                        <template slot-scope="scope">
                                <el-input v-model="remarks" placeholder="请输入备注"  @keyup.enter.native="writeinfos(scope.row)" v-if="remarksone"></el-input>
                                <span @click="istest(scope.row)" v-if="remarkstwo">{{scope.row.description}}111</span>
                            </template>
                  </el-table-column> -->
                
                  <el-table-column align="center" prop="address" label="操作" width="150">
                    <template slot-scope="scope">
                      <span class="canceloff-btn" @click="cancelAllcat(scope.row)" style="color:blue">取消调拨</span>
                      
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
                  @current-change="handleCurrentChange">
                </el-pagination> -->
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10,20,30]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
              </div>
              <audio id="myaudio" src="../../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
              <audio id="warn" src="../../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
              <el-dialog :title="titleb" :visible.sync="dialogFormVisible">
                    <el-form>
                        <el-form-item label="">
                            <el-input v-model="remarks" placeholder="请输入备注"  @keyup.enter.native="writeinfos(scope.row)"></el-input>
                        </el-form-item>
                     
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="sureData">确 定</el-button>
                    </div>
                  </el-dialog>
        </div>
    </template>
    <script>
            export default{
                data(){
                    return{
                        outstore:'',
                        storeId:'',
                        inputAreaId:'',
                        selectedOptions:[],
                        deptData:[],
                        inType:'',
                        unusedNum:'',
                        page: {
                            pageSize: 10,
                            current: 1,
                            total: null
                        },
                        tableData:[],
                        goodsId:'',
                        goodNo:'',
                        unit:'',
                        remarks:'',
                        disabled:false,
                        remarksone:false,
                        remarkstwo:true,
                        dialogFormVisible:false,
                        titleb:'',
                        descId:''
                    }
                },
                mounted () {
                    this.area();
                    this.inintable();
                },
                methods: {
                    //货位
                    handleChangetype(id){
                        this.getAvaAreaCounts(id)
                       
                    },
                    //仓库
                    handleChange(id){
                        this.inputAreaId = '';
                        this.areainfo(id)
                        this.$emit("handleChange", id);
                    },
                    //确定调拨
                    sureAllcat(){
                        if(this.goodNo == ''){
                            
                            this.$message({
                            type: "error",
                            message: "请勾选对应的商品"
                            });
                        }else{
                            this.suremove(this.goodNo);
                        }
                       
                       
                    },
                    //取消调拨
                    cancelAllcat(row){
                        this.$confirm("是否取消调拨?", "系统提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.goodNo = row.goodsId;
                            this.cancelmove(this.goodNo);
                            
                            // this.$message({
                            //   type: "success",
                            //   message: "删除成功!"
                            // });
                        }).catch(() => {
                            this.$message({
                            type: "info",
                            message: "已取消调拨"
                            });
                        });
                       
                        // this.cancelmove(val.goodsId);
                        // this.inintable();
                    },
                    //调拨记录
                    Allcatrecord(){
                        this.$router.push({path:'/cellCationdetail'});
                    },
                    //页码
                    handleSizeChange(value){
                        this.page.pageSize = value;
                        this.inintable();
                    },
                    handleCurrentChange(value){
                        this.page.current = value;
                        this.inintable();
                    },
                    //多选
                    handleSelectionChange(arr){
                        let array = [];
                        arr.forEach(element => {
                            array.push(
                            element.goodsId
                            )
                        });
                  
                        this.goodNo = array.join(',');
                        
                        
                    },
                    //二维码录入
                    smentry(){
                        if(this.inputAreaId == '' || this.goodsId == ''){
                        this.$message({
                            type: "error",
                            message: '仓库货位和商品ID不能为空'
                            });
                        }else{
                            if(this.storeId != this.outstore){
                                this.$message({
                                type: "error",
                                message: '请选择相同仓库进行调拨操作'
                                });
                            }else{
                                this.moveGoods();
                                this.goodsId = '';
                            }
                               
                        }
                    },
               
                     //音频录入
                        autoplays(){
                        let audio =  document.getElementById('myaudio')
                        audio.currentTime = 0
                        audio.play();
                        // this.$netxTick(function(){
                        // console.log(document.getElementById('myaudio'), 999)
                        
                        //  })
                    },
                    //
                    warnplay(){
                        let warn = document.getElementById('warn');
                        warn.currentTime = 0
                        warn.play();
                    },
                    async inintable(){
                        try{
                            let {data} = await this.$post({
                                api:'/cellarGoodsMoving/show/allMoveCellarGoods',
                                data:{
                                    current:this.page.current,
                                    pageSize:this.page.pageSize,
                                    moveStatus:0,
                                    startTime:'',
                                    endTime:'',
                                    moveNo:''
                                }
                            })
                            if(data.code === 0){
                                this.tableData = data.data;
                                this.page.total = data.rdPage.total;
                                console.log(data)
                            }
                        }catch(error){
    
                        }
                    },
                    //扫描录入
                    async moveGoods(){
                        try{
                            let {data} = await this.$post({
                                api:'/cellarGoodsMoving/scan/moveGoods',
                                data:{
                                    goodsId:this.goodsId,
                                    areaId:this.inputAreaId,
                                    description:'',
                                    
                                }
                            })
                            if(data.code === 0){
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.autoplays();
                                this.inintable();
                            }else{
                                this.$message({
                                    type: "error",
                                    message: data.msg
                                });
                                this.warnplay();
                            }
                        }catch(error){
    
                        }
                    },
                    //仓库
                    async area() {
                    
                    try {
                     
                      let { data } = await this.$post({
                        api: "/cellar/get/getStoreSelect"
                        
                      });
                      
                      if (data.code === 0) {
                        this.selectedOptions = data.data;
                     
                      } else {
                        this.$message({
                          type: "error",
                          message: data.msg
                        });
                      }
                    } catch (e) {
                      // this.$message({
                      //   type: "error",
                      //   message: "接口报错"
                      // });
                    }
                  },
                    //根据仓库id货位
                   async areainfo(id) {
                      try {
                        let { data } = await this.$post({
                          api: "/cellar/get/getStoreAreaSelect",
                          data:{
                            cellarId:id
                          }
                        });
                        if (data.code === 0) {
                          
                          this.deptData = data.data;
                          // this.inType = data.data[0].areaType;
                          // this.unusedNum = data.data[0].unusedNum;
                        console.log(data)
                        } else {
                          this.$message({
                            type: "error",
                            message: data.msg
                          });
                        }
                      } catch (e) {
                        // this.$message({
                        //   type: "error",
                        //   message: "接口报错"
                        // });
                      }
                   },
                    //酒窖货位剩余位置
             async getAvaAreaCounts(id) {
              try {
                let { data } = await this.$post({
                  api: "/getAvaAreaCounts",
                  data:{
                    areaId:id
                  }
                });
                if (data.code === 0) {
                  
                  console.log(data)
                  this.inType = data.data.area_type;
                  this.unusedNum = data.data.unused_num;
                
                  switch (data.data.unit){
                    case 0:
                    this.unit  = '瓶'
                    break;
                    case 1:
                    this.unit  = '坛'
                    break;
                    case 2:
                    this.unit  = '桶'
                    break;
                    default:
                  }
               
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
                   //根据仓库找数量
                   async numinfo(id) {
                      try {
                        let { data } = await this.$post({
                          api: "/show/area/num",
                          data:{
                            // areaId:this.storeId,
                            areaId:id
                          }
                        });
                        if (data.code === 0) {
                          
                          // this.deptData = data.data;
                          this.inType = data.data.area_type;
                          this.unusedNum = data.data.unused_num;
                          this.unit = data.data.unit;
                        console.log(data)
                        } else {
                          this.$message({
                            type: "error",
                            message: data.msg
                          });
                        }
                      } catch (e) {
                        // this.$message({
                        //   type: "error",
                        //   message: "接口报错"
                        // });
                      }
                   },
                   //确定调度
                   async suremove(id){
                       try{
                           let {data} = await this.$post({
                               api:'/cellarGoodsMoving/sure/moveCellarGoods',
                               data:{
                                goodsIds:id
                               }
                           })
                           if(data.code === 0){
                                this.$message({
                                type: "success",
                                message: data.msg
                            });
                            this.inintable();
                           }else{
                            this.$message({
                                type: "error",
                                message: data.msg
                            });  
                           }
                       }catch(error){
    
                       }
                   },
                   //取消调度
                   async cancelmove(id){
                       try{
                           let {data} = await this.$post({
                               api:'/cellarGoodsMoving/cancel/moveCellarGoods',
                               data:{
                                goodsId:id
                               }
                           })
                           if(data.code === 0){
                                this.$message({
                                type: "success",
                                message: data.msg
                            });
                            this.inintable();
                           }else{
                            this.$message({
                                type: "error",
                                message: data.msg
                            });
                           }
                       }catch(error){
    
                       }
                   },
                   //调拨信息
                   async writeinfo(id){
                       try{
                           let {data} = await this.$post({
                               api:'/cellarGoodsMoving/edit/moveInfo',
                               data:{
                                id:id,
                                info:this.remarks
                               }
                           })
                           if(data.code === 0){
                                this.$message({
                                type: "success",
                                message: data.msg
                            });
                            // this.disabled = true; 
                            this.dialogFormVisible = false;
                            this.inintable();
                           }else{
                            this.$message({
                                type: "error",
                                message: data.msg
                            });
                           }
                       }catch(error){
    
                       }
                   },
                   writeinfos(row){
                       this.writeinfo(row.id);
                       
                    //    console.log(row)
                   },
                   istest(row){
                       this.descId = row.id
                       console.log(row)
                       if(row.description == ''){
                           this.titleb = '添加备注'
                       }else{
                       this.titleb = '修改备注'
                       }
                    this.dialogFormVisible = true;
                    this.remarks  = row.description;
                       
                    //    this.two = false;
                   },
                   sureData(){
                    //  console.log(this.descId)
                    this.writeinfo(this.descId);
                    
                   }
                }
            }
        </script>